<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="min-width:800px;">
        <div class="attachment_box">
            <div class="attachment_li">
                <h3>发票附件:</h3>
                <div class="file_box">
                    <div class="file_li" v-for="(item, index) in  attachments " :key="index" @click="openHandle(item)">
                        <img v-if="item.includes('.doc') || item.includes('.docx')" src="../../assets/word_icon.png">
                        <img v-if="item.includes('.xls') || item.includes('.xlsx')" src="../../assets/excel_icon.png">
                        <img v-if="item.includes('.ppt') || item.includes('.pptx')" src="../../assets/ppt_icon.png">
                        <img v-if="item.includes('.pdf')" src="../../assets/pdf_icon.png">
                        <img v-if="item.includes('.jpg') || item.includes('.png')" src="../../assets/img_icon.png">
                        <p>{{ item.split("_")[1] }}</p>
                    </div>
                </div>
            </div>
            <div class="attachment_li">
                <h3>其他附件:</h3>
                <div class="file_box">
                    <div class="file_li" v-for="( item, index ) in  attachments1 " :key="index"
                        @click="openHandle(item)">
                        <img v-if="item.includes('.doc') || item.includes('.docx')" src="../../assets/word_icon.png">
                        <img v-if="item.includes('.xls') || item.includes('.xlsx')" src="../../assets/excel_icon.png">
                        <img v-if="item.includes('.ppt') || item.includes('.pptx')" src="../../assets/ppt_icon.png">
                        <img v-if="item.includes('.pdf')" src="../../assets/pdf_icon.png">
                        <img v-if="item.includes('.jpg') || item.includes('.png')" src="../../assets/img_icon.png">
                        <p>{{ item.split("_")[1] }}</p>
                    </div>
                </div>
            </div>
            <div class="attachment_li">
                <h3>合同附件:</h3>
                <div class="file_box">
                    <div class="file_li" v-for="( item, index ) in attachments2" :key="index" @click="openHandle(item)">
                        <img v-if="item.includes('.doc') || item.includes('.docx')" src="../../assets/word_icon.png">
                        <img v-if="item.includes('.xls') || item.includes('.xlsx')" src="../../assets/excel_icon.png">
                        <img v-if="item.includes('.ppt') || item.includes('.pptx')" src="../../assets/ppt_icon.png">
                        <img v-if="item.includes('.pdf')" src="../../assets/pdf_icon.png">
                        <img v-if="item.includes('.jpg') || item.includes('.png')" src="../../assets/img_icon.png">
                        <p>{{ item.split("_")[1] }}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template> -->
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddFaProject",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            attachments: [],
            attachments1: [],
            attachments2: [],
            addFaProjectForm: {},
            fileData: {},
        };
    },
    mounted() {
        // console.log(123, this.fileData);
    },
    methods: {
        getFile(data) {
            console.log(111, data);
            if (data.invoiceEnlosure) {
                this.attachments = data.invoiceEnlosure.split(",")
            }
            if (data.enclosure) {
                this.attachments1 = data.enclosure.split(",")
            }
            if (data.agreementEnclosure) {
                this.attachments2 = data.agreementEnclosure.split(",")
            }
        },
        getAttachmentById(id) {
            httpService("/javaApi/faProject/queryById", { id: id }, "get").then(
                (data) => {
                    this.addFaProjectForm = data;
                    this.attachments = data.invoiceEnlosure.split(",")
                    this.attachments1 = data.enclosure.split(",")
                    this.attachments2 = data.agreementEnclosure.split(",")
                }
            );
        },
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addFaProjectForm.id = "";
            this.addFaProjectForm = {}
        },
        openHandle(data) {
            // window.open("https://wx.zhengzhong.cn" + data, "_blank")
            window.open(data, "_blank")
            // window.location.href = data
        },

    },
};
</script>
<style>
.el-dialog {
    width: 80%;
}

.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 15px;
}

.selest_11 {
    width: 190px;
}

.el-upload button {
    width: 190px;
}

.attachment_li p {
    color: #000;
    font-size: 14px;
    margin: 10px 0 0 0;
}


.attachment_box {
    border: 1px solid rgb(189, 189, 189);
    padding: 0 15px 15px;
}

.attachment_li .file_box {
    display: flex;
    /* align-items: center; */
}

.attachment_li .file_li {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    margin-right: 30px;
    width: 150px;
}

.attachment_li .file_li p {
    width: 150px;
    word-wrap: break-word;
    text-align: center
}

.attachment_li .file_li img {
    width: 50px;
}
</style>